<template>
  <div class="page">
    <div class="page-title">
      <top-tab :tabList="tabList" @changeTab="changeTab"></top-tab>
    </div>

    <div class="page-content">
      <div class="page-content-screen">
        <div class="screen">
          <search-input title="关键词" :width="189"  :prefixIcon="{ icon: 'vi-sousuo', color: '#666666', cursor: true }" :suffixIcon="{}" v-model="searchTxt"
                        placeholder="请输入债券简称/发行人"
                        @enter="handlerInput" @clear="handlerInput"/>
          <vc-filter v-if="queryData.bondCompanyType === 1" :menus="screen"/>
          <vc-filter v-if="queryData.bondCompanyType === 2" :menus="screen2"/>
        </div>
        <div class="total">共计 <sapn style="color: rgba(255, 89, 89, 1)">{{ totalNum }}</sapn> 条</div>
      </div>
      <div class="page-content-table">
        <vc-table
          :loading="loading"
          :tableData="tableData"
          :columns="columns"
          :total="totalNum"
          :pageSize="PAGE_SIZE"
          :pageNum="queryData.pageNum"
          :defaultSort="{ field: 'noticeDate', order: 'desc' }"
          :maxHeight="maxHeight"
          @page-change="handleCurrentChange"
          @sort-change="sortChange"
        />
      </div>
    </div>
    <echarts-dialog v-model:show="showEchartsDialog"
                    :echartsData="echartsDialogData"></echarts-dialog>
  </div>
</template>
<script lang="ts" setup>
import {getGreenBond} from '../apis';
import {useTable} from './useTable';
import {useScreen} from './useScreen';
import {calculateTableMaxHeight} from "@/utils";
import searchInput from '@/components/page-search/index.vue';
import echartsDialog from './../components/echarts-dialog.vue';
import {usePage} from '@/use/usePage';
import TopTab from "@/views/modules/greenBond/components/top-tab.vue";

const {PAGE_SIZE, screen, screen2, queryData} = useScreen();
let maxHeight = $ref(0)
queryData.bondCompanyType = 1
const {data, loading, run} = useRequest(getGreenBond, {
  defaultParams: [{...queryData}],
  onSuccess: (data) => {
    tableData.value = data.values;
    totalNum.value = data.total;
    nextTick(() => {
      //计算最大高度
      maxHeight = calculateTableMaxHeight()
    })
  }
});

//页面resize，重新计算高度
window.onresize = function () {
  maxHeight = calculateTableMaxHeight()
}

const tabList = [{name: '企业发行绿色债券', code: 1}, {name: '金融机构发行绿色债券', code: 2}]
const changeTab = (code) => {
  queryData.bondCompanyType = code
  resetQueryData()
}
//切换tab数据重置
const resetQueryData = () => {
  queryData.provinceCode = '';
  queryData.cityCode = '';
  queryData.countryCode = '';
  queryData.greenBondCaliber = '';
  queryData.greenBondVariety = '';
  queryData.bondType = '';
  queryData.hasFacilityRating = '';
  queryData.maturityType = '';
  queryData.companyType = '';
  queryData.issuingDateStart = '';
  queryData.issuingDateEnd = '';
}
const {columns, showEchartsDialog, echartsDialogData} = useTable();
const {
  tableData,
  totalNum,
  searchTxt,
  handlerInput,
  handleCurrentChange,
  sortChange
} = usePage(queryData, run);

</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
